<template>
  <div class="mb_ours">
    <!-- 导航条 -->
    <div class="mb_nav_barbox_bg">
      <van-nav-bar left-arrow @click-left="onClickLeft" title="我的" @click-right="onClickRight" :border='false'>
        <template #right>
          <van-icon name="weapp-nav" size="24" />
        </template>
      </van-nav-bar>
    </div>
    <!-- ./ 导航条 end here-->

    <!-- 用户信息集合 -->
    <div class="user_info_box">
      <!-- 用户信息 -->
      <div class="user_info">
        <van-image :src="require('@/assets/img/icon-user.jpg')" />
        <!-- 登陆前 -->
        <div class="text_group" style="display: none;">
          <van-button size="small" color="#ffffff" plain>登陆</van-button>
          <p class="tips">登录后可查看更多信息哦~</p>
        </div>
        <!-- ./ 登陆前 end here -->

        <!-- 登陆后 -->
        <div class="text_group">
          <p class="dis-inblock"><span class="text">上午好,</span><span class="number_tel">159****0909</span></p>
          <p class="lineh">
            <span class="add"><van-icon name="location" /><span>河南</span>&nbsp;<span>信阳</span></span>
            <span class="credit">信用分<span class="ff-arial">573</span></span>
          </p>
        </div>
        <div class="coupon-bg">
          <van-icon :name="require('@/assets/img/equity.png')" size="12" />
          <span>我的权益</span>
        </div>
        <!-- ./ 登陆后 end here -->
      </div>
      <!-- ./ 用户信息 here -->
      <!-- 用户通信信息 -->
      <div class="comm_summary">
        <van-row>
          <van-col span="6">
            <div class="tit"><span>98.20</span><span>GB</span></div>
            <p class="txt">通用剩余流量</p>
          </van-col>
          <van-col span="6">
            <div class="tit"><span>12.98</span><span>元</span></div>
            <p class="txt">话费余额</p>
          </van-col>
          <van-col span="6">
            <div class="tit"><span>300</span><span>分钟</span></div>
            <p class="txt">通话剩余</p>
          </van-col>
          <van-col span="6">
            <div class="tit"><span>129</span><span>分</span></div>
            <p class="txt">积分</p>
          </van-col>
        </van-row>
      </div>
      <!-- ./ 用户通信信息 end here -->
    </div>
    <!-- ./ 用户信息集合 end here -->

    <!-- 我的套餐 -->
    <div class="user_combo">
      <p class="brand">
        <van-image :src="require('@/assets/img/my-combo.png')" />
        <span class="txt">动感地带8元4G飞享卡</span>
      </p>
      <p class="fate">中国移动已陪您走过 <span>2689</span> 天</p>
    </div>
    <!-- ./ 我的套餐 end here -->

    <!-- 菜单-双格 -->
    <div class="hoopz_menu_two mb_margin_sm">
      <van-row>
        <van-col span="12">
          <van-button icon-prefix="icon" icon="24huafei" class="rc">充话费</van-button>
        </van-col>
        <van-col span="12">
          <van-button icon-prefix="icon" icon="liuliang" class="fl">充流量</van-button>
        </van-col>
      </van-row>
    </div>
    <!-- ./ 菜单-双格 end here -->

    <!-- 九宫格（我的服务） -->
    <div class="hoopz_box mb_margin_sm">
      <van-cell title="我的服务" value="查看更多" is-link :border="false" />
      <van-grid :column-num="4" class="hoopz_group">
        <van-grid-item icon-prefix="icon" icon="icons_yd01" text="我的套餐" style="color:#6DCCB4;" to="mb-vfp-setmeal" />
        <van-grid-item icon-prefix="icon" icon="icons_yd02" text="账单查询" style="color:#50A1F5;" to="/" />
        <van-grid-item icon-prefix="icon" icon="icons_yd03" text="已定业务" style="color:#B28EF8;" to="/" />
        <van-grid-item icon-prefix="icon" icon="icons_yd04" text="139邮箱" style="color:#EEB84B;" to="/" />
      </van-grid>
    </div>
    <!-- ./ 九宫格（我的服务） end here -->
   
    <!-- 轮播图 -->
    <div class="swipe_box mb_margin_sm">
      <van-swipe :autoplay="3000" lazy-render class="mb_swipe">
        <van-swipe-item v-for="thumb in banners.thumb" :key="imathumbge">
          <img :src="thumb" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- ./ 轮播图 end here -->

    <!-- 宫格（为您推荐） -->
    <div class="referral_box mb_margin_sm">
      <h3>为您推荐</h3>
      <van-divider />
      <van-grid :column-num="4" :border="false" :icon-size="40" >
        <van-grid-item :icon="require('../../assets/img/icon_ls01.png')" text="流量优惠" to="/" />
        <van-grid-item :icon="require('../../assets/img/icon_ls02.png')" text="话费查询" to="/" />
        <van-grid-item :icon="require('../../assets/img/icon_ls03.png')" text="套餐变更" to="/" />
        <van-grid-item :icon="require('../../assets/img/icon_ls04.png')" text="套餐余量" to="/" />
      </van-grid>
    </div>
    <!-- ./ 宫格（为您推荐） end here -->

    <!-- Tabbar 标签栏 -->
    <van-tabbar v-model="active" active-color="#017DFF" inactive-color="#666666">
      <van-tabbar-item icon="wap-home" name="mb-home" replace to="mb-home">首页</van-tabbar-item>
      <van-tabbar-item icon="bars" name="mb-class" replace to="mb-class">分类</van-tabbar-item>
      <van-tabbar-item icon="bookmark" name="mb-equit" replace to="mb-equity">权益</van-tabbar-item>
      <van-tabbar-item icon="manager" name="mb_ours" replace to="mb_ours">我的</van-tabbar-item>
    </van-tabbar>
    <!-- ./ Tabbar 标签栏 end here -->

  </div>
</template>


<script>
import { ref } from 'vue';
import { Toast } from 'vant';
import 'vant/es/toast/style';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const active = ref('mb_ours');
    const onClickRight = () => Toast('查看更多');

    return {
      onClickLeft,
      active,
      onClickRight,
      banners: {
        // 轮播图
        thumb: [
          require('../../assets/img/activity1.png'),
          require('../../assets/img/activity2.png'),
        ],
      },

    }
  },

};

</script>

<style lang="less">
.mb_ours {
  padding-top: 46px;
  padding-bottom: 64px;
}

/* 导航条 */
.mb_nav_barbox_bg {
  position: fixed;
  z-index: 10000;
  top: 0;
  height: auto;
  width: 100%;
  clear: both;

  .van-nav-bar {
    background: #416fdf;

    .van-icon {
      color: white;
    }

    .van-nav-bar__title {
      color: white;
    }
  }
}

/* ./ 导航条 end here */

/* 用户信息集合 */
.user_info_box {
  background: -webkit-gradient(linear, top, bottom, from(#416fdf), to(#4ca1fd));
  background: linear-gradient(to bottom, #416fdf, #4ca1fd);
  -webkit-box-pack: start;

  .coupon-bg {
    background: #3d8ee7;
    border-radius: 12px 0 0 12px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    padding: 0 12px 0 8px;
    position: absolute;
    right: 0;
    top: 36px;

    .van-icon {
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      margin-left: 2px;
    }
  }

  .user_info {
    -ms-flex-pack: start;
    justify-content: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 12px;
    padding-top: 12px;
    position: relative;

    .van-image {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      border: 1px solid #5584e7;
      overflow: hidden;
      display: block;
    }

    .text_group {
      padding-left: 16px;

      .van-button {
        background: transparent;
        border-color: white;
        color: white;
      }

      .tips {
        font-size: 12px;
        color: white;
        margin: 8px 0 0 0;
      }

      .dis-inblock {
        font-size: 16px;
        color: white;
        margin: 0;
        font-weight: bold;
      }

      .lineh {
        margin: 0;
        font-size: 12px;
        color: white;
        margin-top: 8px;

        .credit {
          margin-left: 8px;
          border: 1px solid #87a7fd;
          border-radius: 9px;
          padding: 0 8px;
          text-align: center;
          font-size: 12px;
          line-height: 18px;
        }
      }
    }
  }

  .comm_summary {
    padding: 12px 0 8px 0;
    background: url("../../assets/img/wave-2.png") bottom no-repeat;
    background-size: 100% auto;

    .van-row {
      padding: 12px 0 12px 0;
      font-size: 12px;

      .tit {
        text-align: center;
        color: white;

        span:first-child {
          font-size: 1.2em;
          font-weight: bold;
          letter-spacing: -1px;
        }

        span:last-child {
          font-size: 0.9em;
          margin-left: 2px;
          letter-spacing: -1px;
        }
      }

      .txt {
        text-align: center;
        font-size: 12px;
        transform: scale(0.9);
        color: white;
        margin: 8px auto 0 auto;
      }
    }
  }

}

/* ./ 用户信息集合 end here */

/* 我的套餐 */
.user_combo {
  padding: 12px var(--van-padding-sm);
  background: white;

  .brand {
    margin: 0;
    color: #666;
    font-size: 13px;

    .van-image {
      height: 12px;
      width: auto;
      vertical-align: middle;
      background: #e3f0ff;
      padding: 4px 8px;
      border-radius: 10px;
    }

    .txt {
      vertical-align: middle;
      margin-left: 4px;
    }
  }

  .fate {
    margin: 0;
    font-size: 12px;
    color: #4699ff;
    margin-top: 6px;
  }
}

/* ./ 我的套餐 end here */

/* 菜单-双格 */
.hoopz_menu_two {
  .van-row {
    background: white;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: var(--van-border-radius-lg);

    .van-col {
      text-align: center;

      .rc {
        background: -webkit-gradient(linear, left top, right top, from(#ffa359), to(#fe6076));
        background: linear-gradient(to right, #ffa359, #fe6076);
        -webkit-box-shadow: 0 6px 21px 1px #ffc9c7;
        box-shadow: 0 6px 21px 1px #ffc9c7;
        color: white;
        width: 80%;
        border-radius: var(--van-border-radius-lg);
        border: none;
      }

      .fl {
        background: -webkit-gradient(linear, left top, right top, from(#4ea4ff), to(#8d7aff));
        background: linear-gradient(to right, #4ea4ff, #8d7aff);
        -webkit-box-shadow: 0 6px 21px 1px #cdcdff;
        box-shadow: 0 6px 21px 1px #cdcdff;
        color: white;
        width: 80%;
        border-radius: var(--van-border-radius-lg);
        border: none;
      }
    }
  }
}

/* ./ 菜单-双格 end here */

/* 九宫格（我的服务） */
.hoopz_box {
  padding: 0 var(--van-padding-sm);

  .van-cell {
    border-top-left-radius: var(--van-border-radius-lg);
    border-top-right-radius: var(--van-border-radius-lg);
  }

  .hoopz_group {
    border-bottom-left-radius: var(--van-border-radius-lg);
    border-bottom-right-radius: var(--van-border-radius-lg);
    overflow: hidden;
  }
}
/* ./ 九宫格（我的服务） end here */

/* 轮播图 */
.swipe_box {
  .mb_swipe {
    img {
      width: 100%;
      display: block;
      border-radius: var(--van-border-radius-lg);
    }
  }
}

/* ./ 轮播图 end here */

/* 宫格（为您推荐） */
.referral_box {
  h3 {
    background: white;
    border-top-left-radius: var(--van-border-radius-lg);
    border-top-right-radius: var(--van-border-radius-lg);
    font-size: var(--van-font-size-md);
    color: var(--van-gray-8);
    font-weight: bold;
    text-align: center;
    padding: var(--van-padding-xs) 0;
    margin: 0;
  }
  .van-divider{
    margin: 0;
  }
  .van-grid{
    border-bottom-left-radius: var(--van-border-radius-lg);
    border-bottom-right-radius: var(--van-border-radius-lg);
    overflow: hidden;
  }
}

/* ./ 宫格（为您推荐） end here */

/* xxx */

/* ./ xxx end here */
</style>